//1.什么是vuex
//状态:可以把组件中data中所有的数据都称之为"状态"
//vuex是一个状态管理工具,管理组件共享的状态

//2.为什么需要使用vuex

//为了解决组件之间的参数传递的问题,传统的传参方式 可维护性差 大型项目直接就G了

//3.什么内容应该要放到vuex
//那些需要被其它组件共享的属性才放到vuex

import Vue from "vue"

import Vuex from "vuex"

import users from "./users"

Vue.use(Vuex)
//一个项目只能实例化一个store 这叫做单例对象
export default new Vuex.Store({//rootStore
    strict: true,//开启严格模式,用于警告开发者mutation是更改state的唯一方式
    state: { //状态 组件共享的数据都应该放到这个state中
        name: "程潇",
        num: 10,
        msg: "今夜我又来到你的窗外,窗帘上你的影子是多么可爱",
        product: []
    },
    //对数据进行预处理操作,getters就相当于是vuex中的计算属性,会接收state作为参数
    //特性和组件中的computed是一摸一样的
    getters: {
        reverseMsg(state) {
            // state.name='李雷'
            return state.msg.split("").reverse().join("")
        }
    },
    mutations: {
        //`更改vuex中状态的唯一方式就是提交mutation`
        //一个type对应一个处理函数,这个处理函数会接受state作为唯一的参数
        //通过store.commit(type,payload) 来进行提交
        //payload(荷载)这个参数就是接受commit传递的其它参数
        INCREMENT(state, payload) {
            console.log(payload)
            state.num++
        },
        DECREMENT(state) {
            state.num--
        },
        //设置产品
        SET_PRODUCT(state, payload) {
            state.product = payload
        }
    },
    actions: { //专门负责操作异步逻辑,比如发送异步请求
        //和mutation差不多,都是通过一个类型对应一个处理函数
        //action中的接收的参数不是state,而是一个叫做context的对象
        FETCH_PRODUCT(context) {
            console.log(context)
            // context.state.name='韩梅梅'
            fetch("http://chst.vip/data/index.json")
                .then(body => body.json())
                .then(res => {
                    //将数据提交给mutation,然后让mutation去修改state
                    context.commit('SET_PRODUCT', res.data)
                })
        }
    },
    modules: {
        usersStore: users
    },
    // plugins:{}
})